{extend name="layout/layout" /} {block name="title"}新闻资讯{/block} {block
name="container"}
<div class="loading">
  <img src="/template/assets/images/box-bg-circle.png" alt="" />
  <span>LOADING</span>
</div>

<div class="page-banner">
  <img src="/template/assets/images/news-img-banner.jpeg" alt="" />
  <div class="page-title">
    <h1>新闻资讯</h1>
    <span>- News -</span>
    <img src="/template/assets/images/box-bg-circle.png" alt="" />
  </div>
</div>

<div class="page-bd">
  <div class="container">
    <div class="news-box">
      <?php if($news): ?>
      <div class="news-box-hd">
        <img src="<?php echo $news[0]['image']; ?>" alt="" />
        <h2><?php echo $news[0]['title']; ?></h2>
      </div>
      <div class="news-box-bd">
        <?php foreach($news as $v): ?>
        <a class="news-box-item" href="/news/detail/<?php echo $v['id']; ?>">
          <h2><?php echo $v['title']; ?></h2>
          <span>Read more</span>
        </a>
        <?php endForeach; ?>
      </div>
      <?php endIf; ?>
    </div>
  </div>

  <div class="news-wrap">
    <div class="news-list">
      <?php foreach($lists as $v): ?>
      <a class="news-item" href="/news/detail/<?php echo $v['id']; ?>">
        <img src="<?php echo $v['image']; ?>" alt="" />
        <div class="news-content">
          <p><?php echo $v['title']; ?></p>
          <img src="/template/assets/images/news-icon-arrow.png" alt="" />
        </div>
      </a>
      <?php endForeach; ?>
    </div>
    <?php if($totalPage == $currentPage): ?>
    <div class="news-wrap-ft" id="noMore">
      <span>没有更多了</span>
    </div>
    <?php endIf; ?>
  </div>
</div>
{/block}
<script>
  let page = 1;
  let hasMore = true;
  let timer = null;

  let winW = window.innerWidth;
  let winCol = 2;
  if (winW >= 1200) {
    winCol = 5;
  } else if (winW >= 992) {
    winCol = 4;
  } else if (winW >= 768) {
    winCol = 3;
  }
  window.onload = () => {
    var $iso = $(".news-list").isotope({
      itemSelector: ".news-item",
      masonry: {
        columnWidth: ".news-item",
        horizontalOrder: true,
        percentPosition: true,
      },
    });

    function handleLoadMore() {
      $.ajax({
        url: `http://www.tooslim.cn/news?page=${page}count=10`,
        method: "GET",
        success: (res) => {
          let { lists, current_page, last_page, total } = res.data;
          let elemStr = "";
          if (lists.length > 0 && hasMore) {
            lists.forEach((item) => {
              elemStr += `
                  <a class="news-item" href="/news/detail/${item.id}">
                    <img src="${item.image}" height="${
                ((window.innerWidth / winCol + 2) / item.width) * item.height
              }">
                      <div class="news-content">
                          <p>${item.description}</p>
                          <img src="./assets/images/news-icon-arrow.png" alt="">
                      </div>
                  </a>
                  `;
            });
            let $elems = $(elemStr);
            $iso.append($elems).isotope("appended", $elems);
            page++;
            // $(".news-list").imagesLoaded(function () {
            //   $iso.isotope("layout");
            // });
          } else {
            hasMore = false;
            let $noMore = document.querySelector("#noMore");
            $noMore.style.display = "flex";
          }
        },
      });
    }

    $(window).scroll(() => {
      const pageH = $(document).height();
      const winH = $(window).height();
      const scrollTop = $(window).scrollTop();
      if (pageH - winH - scrollTop <= 0 && !timer) {
        showLoading();
        timer = setTimeout(() => {
          handleLoadMore();
          timer = null;
          hideLoading();
        }, 1000);
        // handleLoadMore();
      }
    });
  };
</script>
